<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>AngularUI - Date Picker Demo</title>    
    <!-- Styles -->
    <link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
  </head>

  <body ng-app="MyApp">
    <!-- Date -->
    <div ng-controller='MyCtrl'>
    <form name="myForm">

      <label for="date">Select Date:</label>
      <input type="text" id="date" ui-date="dateOptions" ng-model="aDate">

      <div>{{ aDate }}</div>
      <div>
        Read only <input type="text" ui-date ng-model="aDate" readonly>
      </div>


      <div class="field">
        Required date: <input type="text" name="date2" required  ui-date="" ng-model="reqDate">
        <div ng-if="myForm.date2.$error.required">
          The required date field is required.
        </div>
      </div>
    </form>

  </div>
    <!-- Scripts -->
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="assets/date.js"></script>
    <script>
      angular.module('MyApp', ['ui.date'])
      .controller('MyCtrl', function($scope) {
          $scope.aDate = '2015-10-31';
          $scope.dateOptions = {
             dateFormat: 'dd.mm.yy',
          }
      })
    </script>
  </body>

</html>
